<template>
    <view class="order-item" v-if="data">
        <view class="order-item-top">
            <iconsfont customIcons="icon-dingdanhao" :color="'#333'" size="30"></iconsfont>
            <text class="order-desc-text">订单编号：{{ data.Sn }}</text>
        </view>
        <view class="order-item-main" @click="goOrderDetail">
            <view class="order-item-imgs" v-if="data.DetailList">
                <view
                    class="order-item-imgs"
                    v-if="data.DetailList && !getAppSet().isHideImg && data.DetailList.length > 1">
                    <view class="img-item" v-for="(item, index) in data.DetailList.slice(0, 3)" :key="index">
                        <image mode="aspectFill" :src="easyGetImgUrl(item.ProductImage)" class="order-item-img"></image>
                    </view>
                    <uni-icons type="more" v-if="data.DetailList.length > 3"></uni-icons>
                </view>
                <view
                    class="order-item-imgs"
                    v-if="data.DetailList && !getAppSet().isHideImg && data.DetailList.length == 1">
                    <view class="img-item" v-for="(item, index) in data.DetailList" :key="index">
                        <image mode="aspectFill" :src="easyGetImgUrl(item.ProductImage)" class="order-item-img"></image>
                    </view>
                    <view class="order-item-name" v-for="(item, index) in data.DetailList">{{ item.Name }}</view>
                </view>
                <view class="flex">
                    <view
                        ><text class="num-text" v-if="data.DetailList.length > 1">共{{ data.DetailList.length }}种</text
                        ><uni-icons type="arrowright"></uni-icons
                    ></view>
                </view>
            </view>
        </view>
        <view class="order-item-price">
            <view class="order-desc">
                <!-- <text>种类:{{data.DetailList.length}}</text>
				<text>数量:{{getTotalNum()}}</text> -->
            </view>
            <view class="order-price">
                <text>总计:</text>
                <text class="price-text">¥{{ data.PayMoney }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {}
    },
    methods: {
        goOrderDetail() {
            this.easyGoTo(
                "/pages_shop/packet/return/billSelect?id=" + this.data.OrderId + "&userId=" + this.data.UserId,
            )
        },
        getTotalNum() {
            let num = 0
            this.data.DetailList.forEach((e) => {
                num += e.Amount
            })
            return num
        },
    },
}
</script>

<style lang="scss">
@import "style/orderItem.scss";
.flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.order-item {
    .order-item-imgs {
        align-items: center;
        .icon-more {
            color: #333;
        }
    }
    .order-item-price {
        align-items: center;
        .order-price {
            text {
                font-size: 32rpx;
            }
        }
    }
    .order-item-top,
    .order-item-main {
        border: none;
    }
    .order-item-top {
        margin-bottom: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .order-desc-text {
        margin-left: 8rpx;
        color: $app-color-text-main;
    }
    .order-item-main {
        padding-bottom: 0;
    }
    .order-item-img {
        width: 120rpx;
        height: 120rpx;
    }
}
</style>
